<template>
	<view class="tab">
		<scroll-view :scroll-left="scrollLeft" scroll-x scroll-with-animation :show-scrollbar="false" class="tab-list">
			<view
				@click="$emit('change',tab)"
				v-for="tab in tabs"
				:key="tab.code"
				:class="{'active': activeTab.code === tab.code}"
				class="tab-item"
			>{{ tab.name }}
			</view>
		</scroll-view>
	</view>
</template>

<script setup>

import { computed, ref, watch, watchEffect } from 'vue'
import { getScreenWidth } from '@/util/uniapp'

defineEmits(['change'])
const props = defineProps({
	tabs: {
		type: Array,
		required: true,
	},
	activeTab: {
		type: Object,
		required: true,
	},
})

// 简单实现tabs滚动，后期优化
const scrollLeft = computed(() => {
	const activeIndex = props.tabs.findIndex(tab => tab.code === props.activeTab.code)
	// tab长度
	const tabWidth = 80

	if (activeIndex > 2) {
		return tabWidth * activeIndex - 2
	} else {
		return 0
	}
})
</script>

<style scoped lang="scss">
.tab {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 80rpx;
	background-color: #fff;
}

.tab-list {
	position: relative;
	flex: 1;
	white-space: nowrap;
	box-sizing: border-box;

	&:after {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		top: 20rpx;
		width: 1px;
		height: 40rpx;
		background-color: #eee;
	}

	.tab-item {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		margin: 0 10px;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		width: 60px;
		text-align: center;

		&.active {
			color: $mainColor;

			&:after {
				content: "";
				position: absolute;
				left: 50%;
				bottom: 0;
				margin-left: -25px;
				display: block;
				width: 50px;
				height: 2px;
				border-radius: 2px;
				background-color: $mainColor;
			}
		}

		&:last-child {
			margin-right: 30px;
		}
	}
}
</style>
